<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  watch: {
    '$store.state.keepAlive.list'(val) {
      process.env.NODE_ENV === 'development' && console.log(`[ keepAliveList ] ${val}`)
    },
    '$store.state.settings.mode': {
      handler() {
        if (this.$store.state.settings.mode === 'pc') {
          this.$store.commit('settings/updateThemeSetting', {
            'sidebarCollapse': this.$store.state.settings.sidebarCollapseLastStatus
          })
        } else if (this.$store.state.settings.mode === 'mobile') {
          this.$store.commit('settings/updateThemeSetting', {
            'sidebarCollapse': true
          })
        }
        document.body.setAttribute('data-mode', this.$store.state.settings.mode)
      },
      immediate: true
    }
  },
  mounted() {
    window.onresize = () => {
      this.$store.commit('settings/setMode', document.body.clientWidth)
    }
    window.onresize()
  },
  methods: {},
  metaInfo() {
    return {
      title: this.$store.state.settings.enableDynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
}
</script>

<style scoped>
@import "assets/styles/base.scss";
#app {
    height: 100%;
}
</style>
